<template>
  <div class="con">
    <div class="contbox6_10" v-if="type == 1">
      <p class="titlelist6_10">
        权益管理
        <span style="color: #999">&nbsp;&nbsp;/&nbsp;&nbsp;</span>权益列表
      </p>
      <div class="content">
        <div class="sousuojg6_10">
          <el-form ref="form" :model="form" label-width="90px">
            <el-form-item label="归属机构" style="float: left">
              <el-input
                v-model="mechanism"
                @focus="selectInstitution"
                readonly
                style="width: 200px; margin-right: 40px"
                placeholder="请选择归属机构"
              ></el-input>
            </el-form-item>
            <el-form-item label="机构名称" style="float: left">
              <el-input
                v-model="form.officeName"
                placeholder="请输入机构名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="业务类型" style="float: left">
              <el-select v-model="busUid" placeholder="请选择业务类型"  @change="busUidChange">
                <el-option
                    v-for="item in businessOptions"
                    :key="item.uid"
                    :label="item.busName"
                    :value="item.uid"
                  >
                  </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="业务品牌" style="float: left">
              <el-select v-model="form.channelUid" placeholder="请选择业务品牌">
                <el-option
                    v-for="item in brandOptions"
                    :key="item.uid"
                    :label="item.channelName"
                    :value="item.uid"
                  >
                  </el-option></el-select>
            </el-form-item>
          
            <el-form-item label="计算方式" style="float: left">
              <el-select
              v-model="form.rgtCalcType"
              placeholder="请选择计算方式"
            >
              <el-option
                v-for="items in vipType"
                :key="items.value"
                :label="items.label"
                :value="items.value"
              ></el-option></el-select>
            </el-form-item>


            <el-form-item label="状态" style="float: left">
              <el-select v-model="form.rgtStatus" placeholder="请选择状态">
                <el-option label="全部" value=""></el-option>
                <el-option label="开通" value="0"></el-option>
                <el-option label="停用" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div class="buttons">
          <el-button v-if="isAuth('vipSearch')" type="primary" @click="onSubmit"
            >搜索</el-button
          >
          <el-button v-if="isAuth('vipReset')" type="" @click="reset"
            >重置</el-button
          >
          <el-button
            type="primary"
            style="margin-left: 40px"
            class="butt"
            v-if="jurisdiction!=2"
            @click="onnew"
            icon="el-icon-plus"
            >创建权益</el-button
          >
        </div>
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          :header-cell-style="{ background: '#F9FAFC', color: '#222' }"
          stripe
          border
          :row-style="{ height: '0px' }"
          :cell-style="{ padding: '0px' }"
          @selection-change="handleSelectionChange"
        >
          
          <el-table-column
            prop="oemName"
            show-overflow-tooltip
            label="归属机构"
            min-width="200"
          ></el-table-column>
          <el-table-column
            prop="officeName"
            show-overflow-tooltip
            label="机构名称"
            min-width="200"
          ></el-table-column>
          <el-table-column
            prop="busName"
            show-overflow-tooltip
            label="业务类型"
            min-width="200"
          ></el-table-column>
          <el-table-column
            prop="brandChannelName"
            show-overflow-tooltip
            label="业务品牌"
            min-width="200"
          ></el-table-column>

          <el-table-column
            label="计算方式"
            min-width="80"
            prop="rgtCalcTypeName"
          >
            <!-- <template slot-scope="scope">
              <span>
                {{ scope.row.mbrType == "1" ? "刷脸快捷" : "交易推送" }}
              </span>
            </template> -->
          </el-table-column>
          <el-table-column
            prop="rgtCreateDate"
            label="创建时间"
            show-overflow-tooltip
            min-width="160"
          ></el-table-column>
          <el-table-column
            prop="rgtUpdateDate"
            label="更新时间"
            show-overflow-tooltip
            min-width="160"
          ></el-table-column>
          <el-table-column prop="status" v-if="jurisdiction!=2" label="状态" min-width="60">
            <template slot-scope="scope">
              <div>
                <el-switch
                  v-model="scope.row.rgtStatus"
                  @change="swicheChange(scope.row.rgtStatus,scope.row)"
                  active-color="#13ce66"
                  active-value="0"
                  inactive-value="1"
                  inactive-color="#cccccc"
                >
                </el-switch>
              </div>
            </template>
          </el-table-column>
          <el-table-column min-width="190" label="操作" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button
                type="text"
                size="mini"
                v-if="isAuth('vipDetails')"
                @click="check(scope.row)"
                >查看</el-button
              >
              <el-button
                type="text"
                size="mini"
                v-if="jurisdiction!=2"
                @click="checks(scope.row)"
                >修改</el-button
              >
              <!-- <el-button
                size="mini"
                type="text"
                style="color: #f56c6c"
                @click="
                  disableEnable(scope.row.channelUid, scope.row.officeUid, 0)
                "
                v-if="scope.row.status == '启用' && isAuth('vipDisabled')"
                >停用</el-button
              > -->
              <!-- <el-button
                size="mini"
                type="text"
                @click="
                  disableEnable(scope.row.channelUid, scope.row.officeUid, 1)
                "
                v-if="scope.row.status == '停用' && isAuth('vipDisabled')"
                >启用</el-button
              > -->
            </template>
          </el-table-column>
        </el-table>
        <div style="clear: both"></div>
        <el-pagination
          style="text-align: right"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="form.pageIndex"
          :page-sizes="[20, 50, 100]"
          :page-size="form.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalNum"
        ></el-pagination>
      </div>
    </div>
    <Tree :showType="showType" @func="transmit" />
  </div>
</template>
<script>
import Tree from "../tree/index";
import https from "../../plugins/https.js";
import axios from "axios"
export default {
  name: "route",
  data() {
    return {
      jurisdiction:"",
      busType:"",//业务类型
      typebox: 0,
      type: 1,
      currentPage: 1, //默认显示第一页
      showType: false,
      pageSize: 1, //默认每页显示10条
      totalNum: 0, //总页数
      msg: [],
      busUid:"",
      brandTypes:[],
      mechanism: "",
      // 业务类型列表
      businessOptions:"",
      // 业务品牌
      brandOptions:"",
      form: {
        channelUid: "",
        rgtCalcType:"",
        channelName: "",
        rgtStatus: "",//状态
        startDate: "",
        endDate: "",
        pageIndex: 1,
        pageSize: 20,
        officeUid: null,
        mbrType: "",
        oemUid:localStorage.getItem("jurisdiction") != 2
            ? localStorage.getItem("uid")
            : "",
        parentOfficeUid:""
      },
      tableData: [],
      multipleSelection: [],
      vipType: [],
    };
  },
  created() {
    this.jurisdiction = localStorage.getItem("jurisdiction")
  },
  mounted() {
    window.scrollTo(0, 0);
    var _this = this;
    _this.typebox = localStorage.getItem("jurisdiction");
    _this.list();
    _this.vipTypes();
    _this.brandType()
    _this.getType()
  },
  methods: {
    
    // 关闭启用
    swicheChange(val1,val) {
      console.log(val1)
      console.log(val.crmUid)
      
      // this.form.rgtStatus = val.rgtStatus;
      // alert(JSON.stringify(this.form))
      // let obj = {oemUid:val.crmUid,status:val1}
      // console.log(obj)
      axios.post("/api/rgt/editStatus",{oemUid:val.crmUid,status:val1,channelUid:val.brandChannelUid}).then(res=>{
        console.log(res)
        this.list();
      }).catch(err=>{
        console.log(err)
      })
    },
    busUidChange(){
      this.getBrand()
    },
    // 获取业务类型
    getType() {
      axios
        .post("api/business/getAllBusInfo", { status: 0 })
        .then((res) => {
          console.log("获取出来的业务类型");
          console.log(res);
          this.businessOptions = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 根据业务类型获取平拍
    getBrand() {
      axios
        .post("/api/business/getBusChannel", { busUid: this.busUid })
        .then((res) => {
          console.log("获取的品牌");
          console.log(res);
          this.brandOptions = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //品牌类型
    brandType(){

    },
    // 权益类型
    vipTypes() {
      https
        .queryDictList({ type: "calc_type" })
        .then((res) => {
          console.log(res.data.data);
          this.vipType = res.data.data;
        })
        .catch((err) => {});
    },
    //这里开始
    transmit(data) {
      console.log(data);
      //归属机构的uid
      this.form.officeUid = data.uid;
      console.log(this.form.officeUid);
      //归属机构名字
      this.mechanism = data.name;
      this.form.parentOfficeUid = data.uid;
    },
    //设置取消的
    determine() {
      // alert("执行")
      this.showType = false;
    },

    selectInstitution() {
      this.showType = true;
    },
    //这里结束

    // 重置
    reset() {
      this.form.channelName = "";
      this.form.status = "";
      this.mechanism = "";
      this.form.officeName = "";
      this.form.rgtCalcType = "",
      this.form.officeUid = "";
      this.form.oemName = "";
      this.form.oEMName = "";
      this.form.pageIndex = 1;
      this.form.startDate = "";
      this.form.endDate = "";
      this.form.officeUid = "";
      this.form.mbrType = "";
      this.dataTime = [];
      this.busUid = ""
      this.form.channelUid= ""
        this.form.channelUid="",
        this.form.rgtStatus= "",//状态
        this.form.startDate= "",
        this.form.endDate= "",
        this.form.pageIndex= 1,
        this.form.pageSize= 20,
        this.form.officeUid= null,
        this.form.mbrType= "",
        this.form.parentOfficeUid = ""
      this.list();
    },
    // 点击停用/启用
    disableEnable(n, s, t) {
      var _this = this;
      https
        .vipChangeStatus({ channelUid: n, officeUid: s, status: t })
        .then(function (d) {
          if (d.data.code == "0000") {
            layer.open({
              content: d.data.msg,
              skin: "msg",
              time: 2, //1秒后自动关闭
            });
            _this.list();
          } else {
            layer.open({
              content: d.data.msg,
              skin: "msg",
              time: 2, //1秒后自动关闭
            });
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // 点击查看
    check(val) {
      this.$router.push({
        // name: "vipListNew",
        name: "interests",
        query: {
          channelUid: val.channelUid,
          mbrType: val.mbrType,
          officeUid: val.officeUid,
          type: 2,
          callback:"0002",
          crmUid:val.crmUid,
          status:"003",  
        },
      });
    },
    // 点击修改
    checks(val) {
      console.log(val);
      this.$router.push({
        // name: "vipListNew",
        name: "interests",
        query: {
          channelUid: val.brandChannelUid,
          mbrType: val.mbrType,
          officeUid: val.officeUid,
          type: 1,
          callback:"0002",
          crmUid:val.crmUid,
          setData:"0004",
          status:"002",  
        },
      });
    },
    shangyips1(val) {
      this.type = val;
    },
    // 点击创建
    onnew() {
      // this.$router.push("viplistnew");
      this.$router.push({
        name: "interests",
        query: {
          setVal: "0001",
          status:"001",
        },
      });
    },
    // 点击搜索
    onSubmit() {
      this.form.pageIndex = 1;
      this.list();
    },
    // 列表创建
    list() {
      var _this = this;
      let data = _this.form
      https
        .vipList({
          query:_this.form,
          pageIndex:_this.form.pageIndex,
          pageSize:_this.form.pageSize,
          totalPage:_this.form.totalPage,
          totalSize:_this.form.totalSize
        })
        .then(function (d) {
          if (d.data.code == "0000") {
            console.log(d);
            _this.tableData = d.data.data.list;
            // for (var s = 0; s < _this.tableData.length; s++) {
            //   _this.tableData[s].status =
            //     _this.tableData[s].status == 0 ? "启用" : "停用";
            //   _this.tableData[s].type =
            //     _this.tableData[s].type == 0 ? "否" : "是";
            // }
            _this.totalNum = Number(d.data.data.totalSize);
          } else {
            layer.open({
              content: d.data.msg,
              skin: "msg",
              time: 2, //1秒后自动关闭
            });
          }
        })
        .catch(function (error) {});
    },
    // 全选
    handleSizeChange(val) {
      this.form.pageIndex = 1;
      this.form.pageSize = val; //动态改变
      this.list();
    },
    handleCurrentChange(val) {
      this.form.pageIndex = val; //动态改变
      this.list();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
  components: {
    Tree,
  },
};
</script>
<style scoped>
.con {
  position: relative;
}
/* 单独样式 */
.contbox6_10 {
  width: 100%;
  /* margin-left: 2%; */
  /*  height: 87.5vh; */
  overflow-x: auto;
  box-sizing: border-box;
  float: left;
}

.huiyaun6_19 {
  width: 100%;
  float: left;
}
.huiyauntop6_19 {
  width: 100%;
  float: left;
  font-size: 14px;
  margin-top: 30px;
  border-bottom: 1px solid #eee;
}
.huiyauntopli6_19 {
  width: 100px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  float: left;
  border: 1px solid #eee;
  border-radius: 5px;
}
.huiyauntoplitrue6_19 {
  background-color: #409eff;
  color: #fff;
}
.huiyauntoplifalse6_19 {
  background-color: #fff;
  color: #222;
}

.huiyaun6_19 {
  width: 100%;
  float: left;
}
.huiyauntop6_19 {
  width: 100%;
  float: left;
  font-size: 14px;
  margin-top: 30px;
  border-bottom: 1px solid #eee;
}
.huiyauntopli6_19 {
  width: 100px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  float: left;
  border: 1px solid #eee;
  border-radius: 5px;
}
.huiyauntoplitrue6_19 {
  background-color: #409eff;
  color: #fff;
}
.huiyauntoplifalse6_19 {
  background-color: #fff;
  color: #222;
}
.uitupian6_19 {
  width: 100%;
  float: left;
}
.uitupian6_19 li {
  width: 300px;
  float: left;
  position: relative;
  margin-left: 40px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  margin-left: 35px;
  margin-top: 30px;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.buttons > .el-button {
  width: 100px;
  padding: 7px;
  height: 32px;
}
.sousuojg6_10 {
  width: 100%;
}
/deep/ .el-form-item{
  min-width: 330px !important;
}
</style>
